import 'dart:ui';

import 'package:flutter/material.dart';

/// 坐标系类 优化
class Coordinate {
  final Color axisColor;
  final double strokeWidth;
  /// x轴刻度数量
  final int xScaleCount;
  /// y轴刻度数量
  final int yScaleCount;

  Coordinate({this.axisColor = Colors.black,
    this.strokeWidth = 1,
    this.xScaleCount = 10,
    this.yScaleCount = 10
  }) {
    axisPaint
      ..color = axisColor
    // PaintingStyle是一个枚举，有两个值，fill和stroke。
    // fill表示填充，stroke表示描边
      ..style = PaintingStyle.stroke
    // 设定了画笔的宽度为1
      ..strokeWidth = strokeWidth;
  }

  /// 网格线的画笔
  final Paint gridPaint = Paint()
    ..color = Colors.grey
    ..strokeWidth = 1;

  /// 坐标轴画笔
  final Paint axisPaint = Paint();

  /// 坐标轴文字的画笔
  final TextPainter textPainter = TextPainter(
      textAlign: TextAlign.center, textDirection: TextDirection.ltr);

  void paint(Canvas canvas, Size size) {
    // 绘制轴
    _drawAxis(canvas, size);

    // 获取到每个刻度的间隔大小
    double step = size.width / xScaleCount;
    // 绘制x轴数字和刻度
    for (int i = 1; i < xScaleCount; i++) {
      String value = (i / xScaleCount).toStringAsFixed(1); /// toStringAsFixed保留小数点后一位
      // x坐标的位置
      double x = i * step;
      textPainter.text = TextSpan(text: value, style: const TextStyle(
        fontSize: 12, color: Colors.black
      ));
      textPainter.layout();
      textPainter.paint(canvas, Offset(x - textPainter.size.width / 2, 5)); ///< x - textPainter.size.width / 2是为了让文字和刻度居中
      canvas.drawLine(Offset(x, 0), Offset(x, 5), axisPaint);

      // 绘制网格
      canvas.drawLine(Offset(x, 0), Offset(x, -size.height), gridPaint);
    }

    // 获取每个刻度的间隔大小 - y
    double stepY = size.height / yScaleCount;
    // 绘制y轴的数字和刻度
    for (int i = 1; i < yScaleCount; i++) {
      // y坐标的位置 - 因为这个坐标是反的（y轴冲上的）
      double y = -i * stepY;
      textPainter.text = TextSpan(text: "$i", style: const TextStyle(
        fontSize: 14, color: Colors.green
      ));
      textPainter.layout();
      textPainter.paint(canvas, Offset(-textPainter.width - 5, y - textPainter.size.height / 2));
      canvas.drawLine(Offset(0, y), Offset(5, y), axisPaint);

      // 绘制网格
      canvas.drawLine(Offset(0, y), Offset(size.width, y), gridPaint);
    }
    // 绘制0数字
    textPainter.text = const TextSpan(text: "0", style: TextStyle(
      fontSize: 18,
      color: Colors.blue
    ));
    textPainter.layout();
    textPainter.paint(canvas, Offset(-textPainter.size.width/2, 2));
  }

  /// 创建坐标轴
  void _drawAxis(Canvas canvas, Size size) {
    // 绘制轴
    Path axisPath = Path();
    // 绘制x轴 - relativeLineTo 画个线段 - 从原点到参数中的位置画个线段
    axisPath.relativeLineTo(size.width, 0);
    axisPath.relativeLineTo(-10, -4); // 画箭头的下半部分
    axisPath.moveTo(size.width, 0); // 将画笔的y回到轴上，要不然就是接着画了成一个倒三角了
    axisPath.relativeLineTo(-10, 4); // 画箭头的上半部分

    // 回归到原点 - 准备画Y轴
    axisPath.moveTo(0, 0);

    // 绘制Y轴
    axisPath.relativeLineTo(0, -size.height);
    axisPath.relativeLineTo(-4, 10);
    axisPath.moveTo(0, -size.height);
    axisPath.relativeLineTo(4, 10);
    canvas.drawPath(axisPath, axisPaint);

    // 开始绘制轴名称
    textPainter.text = const TextSpan(
        text: "x 轴", style: TextStyle(fontSize: 12, color: Colors.blue));
    textPainter.layout();
    textPainter.paint(canvas, Offset(size.width - textPainter.size.width, 5));

    textPainter.text = const TextSpan(
        text: "y 轴", style: TextStyle(fontSize: 18, color: Colors.red));
    textPainter.layout();
    textPainter.paint(
        canvas, Offset(-textPainter.size.width - 5, -size.height));
  }
}
